<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 若使指针转动，有两种方法
        1，设置一个针，下半部分设置为透明效果
        2，将针放入一个方块中，指针长度为方块的一半，跟着方块转动 */
        /* 表盘 */
        /* animation表动画，可自行运动
        transition表过渡，需搭配hover，要交互使用 */
        .clock{
            width: 300px;
            height: 300px;
            background-color: #bfa;
            border-radius: 50%;
            margin: 60px auto;
            position: relative;
            background-image: url(../复仇者/时钟1.png);
            background-size: cover;
            /* background-size设置背景图片的大小
            ，cover表示将整个窗口铺满，
            contain表示将整个图片放入 */
        }
        /* 注意此处要+大于号，代表.clock的子元素
        ，若不加 > ,则表示为后代元素，其他的div也会被包括 */
        .clock>div{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .hour-wrapper{
            width: 150px;
            height: 150px;
            animation: clock 60s linear infinite;
            /* 实际上并非指针运动，而是指针位于的方块在运动，并带着指针运动。 */
            /* 时针为匀速运动 */
            /* background-color: black; */
        }
        .hour{
            width: 4px;
            height: 50%;
            background-color: black;
            margin: 0 auto;
            /* 此处可直接使用margin居中，因为其父元素已经浮动，脱离了文档流 */
            /* liner代表匀速，ease为默认值 */

        }
        .minute-wrapper{
            width: 190px;
            height: 190px;
            animation: clock 60s steps(60) 2s infinite;
            /* background-color: blue; */
        }
        .minute{
            width: 3px;
            height: 50%;
            background-color: blue;
            margin: 0 auto;
        }
        .second-wrapper{
            width: 230px;
            height: 230px;
            animation: clock 60s steps(60) infinite;
            /* background-color: yellow; */
        }
        .second{
            width: 2px;
            height: 50%;
            background-color: red;
            margin: 0 auto;
            /* 此处可直接使用margin居中，因为其父元素已经浮动，脱离了文档流 */      
        }
        @keyframes clock{
            from{
                transform: rotateZ(0);
                /* 应设置为rotateZ，而非translate，
                translate为平移，需搭配上perspective使用 */
            }

            to{
                transform: rotateZ(1turn);
                /* 1turn表示360deg */
            }
        }

    </style>
</head>
<body>
    <div class="clock">
        <div class="hour-wrapper"><div class="hour"></div></div>
        <div class="minute-wrapper"><div class="minute"></div></div>
        <div class="second-wrapper"><div class="second"></div></div>
    </div>
</body>
</html>